{% extends "sentry/emails/base.html" %}

{% load sentry_helpers %}
{% load sentry_assets %}

{% block head %}

  {{ block.super }}

  <style type="text/css">

    .container {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .header td {
      text-align: right;
      font-size: 14px;
    }

    td, th {
      text-align: left;
    }

    .legend {
      font-size: 14px;
      text-align: right;
    }

    .legend span.swatch {
      width: 16px;
      height: 16px;
      vertical-align: bottom;
      display: inline-block;
      margin: 0 15px 0 15px;
      border-radius: 3px;
      color: #fff;
    }

    .graph .bar {
      margin-bottom: 0;
    }

    .graph .bar td,
    .graph .bar th {
      line-height: 0;
    }

    .issue-graph {
      table-layout: fixed;
    }

    .issue-graph .graph > td,
    .issue-graph .labels > td {
      padding-right: 5px;
    }

    .issue-graph .labels td {
      padding-top: 3px;
      font-size: 10px;
      text-align: center;
      color: #848296;
    }

    #events-seen .legend .all,
    #events-seen .bar .all {
      background-color: #ebe9f7;
    }

    #events-seen .legend .resolved,
    #events-seen .bar .resolved {
      background-color: #6C5FC7;
    }

    .issues-resolved .issues-resolved-column {
      text-align: right;
    }

    .issues-resolved .empty {
      display: block;
      text-align: center;
    }

    .issues-resolved .issues-resolved-column-left {
      padding-right: 15px;
      vertical-align: bottom;
    }

    .issues-resolved .issues-resolved-column-middle {
      padding-left: 20px;
      padding-right: 20px;
    }

    .issues-resolved .issues-resolved-column .stat {
      font-size: 35px;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .issues-resolved .issues-resolved-column .stat img {
      vertical-align: middle;
    }

    .issue-graph, .issue-graph .bar {
      margin-bottom: 0;
    }

    .issue-graph .bar td {
      font-size: 0;
    }

    .project-breakdown {
      margin-bottom: 20px;
    }

    .project-breakdown .graph {
      table-layout: fixed;
    }

    .project-breakdown .graph td {
        font-size: 0;
        border-right: 10px solid #fff;
    }

    .project-breakdown .graph td:last-child {
        border-right: none;
    }

    .project-breakdown .graph .label {
      font-size: 14px;
      color: #848296;
      text-align: center;
      padding-top: 10px;
    }

    .project-breakdown .summary thead th {
      font-size: 12px;
      text-transform: uppercase;
      color: #88859a;
      font-weight: 500;
    }

    .project-breakdown .summary th,
    .project-breakdown .summary td {
      font-size: 14px;
      padding: 5px 0;
    }

    .project-breakdown .summary .numeric {
      text-align: center;
    }

    td.spectrum {  /* XXX: td qualifier is a hack */
      margin: 0;
      padding: 0;
      font-size: 12px;
      text-align: right;
      color: #555;
    }

    .spectrum .range {
      font-size: 0px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 6px;
    }

    .spectrum .range span {
      display: inline-block;
      height: 5px;
      width: 5px;
    }

    .calendar {
      vertical-align: top;
      padding-right: 10px;
    }

    .calendar table {
      table-layout: fixed;
    }

    .calendar:last-child {
      padding-right: 0;
    }

    .calendar h5 {
      font-size: 14px;
      text-align: center;
      margin-bottom: 10px;
    }

    .calendar th {
      font-size: 12px;
      color: #848296;
      text-align: center;
      padding: 0 0 10px 0;
    }

    .calendar .day {
      width: 14.2%;
      padding: 0 5px 5px 0;
    }

    .calendar .day span {
      display: inline-block;
      width: 100%;
      height: 20px;
    }

    .user-impact-stat table {
      width: 90px;
      height: 90px;
      margin: 0 18px 0 0;
    }

    .user-impact-stat td {
      margin: 0;
      padding: 0;
    }

    .user-impact-stat img {
      display: block;
    }

    .user-impact-stat td.count {
      text-align: center;
      line-height: 1;
      font-size: 32px;
      vertical-align: middle;
      color: #6C5FC7;
      width: 64px;
      max-width: 64px;
      overflow: hidden;
    }

    .user-impact-text {
      font-size: 18px;
      font-weight: 500;
      padding-right: 20px;
    }

    #history-calendars h4 {
      margin-bottom: 0px;
    }

  </style>

  <style type="text/css" inline="false">

    .issues-resolved .issues-resolved-column-middle {
      border-left: 1px solid #D6DBE4;
      border-right: 1px solid #D6DBE4;
    }

    @media only screen and (max-device-width: 480px) {

      .mobile-full-width > th,
      .mobile-full-width > td {
          display: block;
          width: 100%;
      }

      h4 {
        text-align: center !important;
      }

      .header td {
        text-align: center !important;
      }

      #events-seen .bar .all {
        background-color: #6C5FC7 !important;
      }

      .project-breakdown .col-filtered,
      .project-breakdown .col-rate-limited {
        display: none;
      }

      #events-seen .legend {
        display: none;
      }

      #events-seen .issue-graph {
        margin-bottom: 10px !important;
      }

      #events-by-issue-type .legend {
        margin-bottom: 20px !important;
        text-align: center !important;
      }

      #events-by-issue-type .quantity {
        display: none;
      }

      .issues-resolved .issues-resolved-column-middle {
        border-left: none;
        border-right: none;
      }

      .issues-resolved .issues-resolved-column-middle,
      .issues-resolved .issues-resolved-column-right {
        text-align: center !important;
        vertical-align: top !important;
        padding: 0 !important;
      }

      .issues-resolved .issues-resolved-column-middle .stat,
      .issues-resolved .issues-resolved-column-right .stat {
        font-size: 24px !important;
      }

      .issues-resolved .issues-resolved-column-middle .stat img,
      .issues-resolved .issues-resolved-column-right .stat img {
        width: 16px !important;
        height: 8px !important;
      }

      .spectrum {
        margin: 20px 0 0 !important;
        text-align: center !important;
      }

    }

  </style>

{% endblock %}

{% block header %}
  <table>
    <tr class="mobile-full-width">
      <td width="125px">
        <h1>
          <a href="{% absolute_uri %}"><img src="{% absolute_asset_url 'sentry' 'images/email/sentry_logo_full.png' %}" width="125px" height="29px" alt="Sentry"></a>
        </h1>
      </td>
      <td class="align-right">
        <strong>{{ duration.adjective|title }} Update for {{ organization.name }}</strong><br />
        {{ interval.start }} &ndash; {{ interval.stop }}
      </td>
    </tr>
  </table>
{% endblock %}

{% block content %}

<div class="container">

  <div id="events-seen">

    <table style="margin-bottom: 10px">
      <tr>
        <td>
            <h4>Events Seen {{ duration.noun|title }}</h4>
        </td>
        <td class="legend">
            <span class="swatch all"></span> All: {{ report.series.all|small_count }}
            <span class="swatch resolved"></span> Resolved: {{ report.series.resolved|small_count }}
        </td>
      </tr>
    </table>

    <table class="issues-resolved">
      <tr class="mobile-full-width">
        <td width="33%" class="issues-resolved-column issues-resolved-column-left">
          <table class="issue-graph">
            <tr class="graph">
            {% with report.series.maximum as max %}
            {% for timestamp, metrics in report.series.points %}
              <td valign="bottom" style="width: {% widthratio 1 report.series.points|length 100 %}%">
                <table class="bar">
                  {% if metrics.resolved or metrics.unresolved %}
                    <tr>
                      <td class="all" height="{% widthratio metrics.unresolved max 52 %}px" title="{{ metrics.unresolved }}">&nbsp;</td>
                    </tr>
                    <tr>
                      <td class="resolved" height="{% widthratio metrics.resolved max 52 %}px" title="{{ metrics.resolved }}">&nbsp;</td>
                    </tr>
                  {% else %}
                    <tr><td></td></tr>
                    <tr><td class="all baseline" height="1px">&nbsp;</td></tr>
                  {% endif %}
                </table>
              </td>
            {% endfor %}
            {% endwith %}
            </tr>
            <tr class="labels">
              {% for timestamp, metrics in report.series.points %}
                <td title="{{ timestamp }}" style="width: {% widthratio 1 report.series.points|length 100 %}%">{{ timestamp|date:duration.date_format|first }}</td>
              {% endfor %}
            </tr>
          </table>
        </td>
        <td width="66%">
          <table width="100%" style="margin: 0;">
            <tr>
              {% for label, change in report.comparisons %}
                <td width="50%" class="issues-resolved-column issues-resolved-column-{% if not forloop.last %}middle{% else %}right{% endif %}">
                  {% if change %}
                    <div class="stat">
                    {% if change >= 0 %}
                        <img src="{% absolute_asset_url 'sentry' 'images/email/arrow-increase.png' %}" width="20px" height="10px">
                    {% else %}
                        <img src="{% absolute_asset_url 'sentry' 'images/email/arrow-decrease.png' %}" width="20px" height="10px">
                    {% endif %}
                    {% with change|multiply:"100"|absolute_value as percentage %}
                        {% if percentage >= 1000 %}{{ percentage|floatformat:"0" }}{% else %}{{ percentage|floatformat:"-1" }}{% endif %}%
                    {% endwith %}
                    </div>
                    <small>{% if change >= 0 %}more{% else %}fewer{% endif %} than {{ label }}</small>
                  {% else %}
                    <small class="empty">There is not enough data to compare to {{ label }}.</small>
                  {% endif %}
                </td>
              {% endfor %}
          </tr>
          </table>
        </td>
      </tr>
    </table>

  </div>

  <div id="events-by-issue-type">

    {% with report.distribution.total as total %}
    <table class="issue-breakdown">
      <tr class="mobile-full-width">
        <td>
          <h4>Events by Issue Type</h4>
        </td>
        <td class="legend">
          {% for type, count in report.distribution.types %}
            <span class="swatch" style="background-color: {{ type.color }};"></span>{{ type.label }}<span class="quantity">: {% percent count total "0.1f" %}%</span>
          {% endfor %}
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <table>
            <tr>
              {% for type, count in report.distribution.types %}
                <td width="{% widthratio count total 100 %}%" title="{{ type.label }}: {{ count }} events" style="background-color: {{ type.color }}">
                  &nbsp;
                </td>
              {% endfor %}
            </tr>
          </table>
        </td>
      </tr>
    </table>
    {% endwith %}

  </div>

  <div class="project-breakdown">

    {% with series=report.projects.series height=110 %}

    <h4>Events by Project</h4>

    <table class="graph">
      <tr>
        {% for timestamp, values in series.points %}
        <td valign="bottom" class="bar" style="height: {{ height }}px; width: {% widthratio 1 series.points|length 100 %}%">
            <table class="bar">
              {% for key, count in values %}
                <tr>
                  <td height="{% widthratio count series.maximum height %}" style="background-color: {{ key.color }};">&nbsp;</td>
                </tr>
              {% empty %}
                <tr>
                  <td height="1" style="background-color: #ebe9f7;"></td>
                </tr>
              {% endfor %}
            </table>
          </td>
        {% endfor %}
      </tr>
      <tr>
        {% for timestamp, values in series.points %}
          <td class="label" style="width: {% widthratio 1 series.points|length 100 %}%">
            {{ timestamp|date:duration.date_format }}
          </td>
        {% endfor %}
      </tr>
    </table>

    <table class="summary">
      <thead>
        <tr>
          <th style="width: 1em;"></th>
          <th style="width: 7em;" class="numeric">Events</th>
          <th>Project</th>
          <th style="width: 7em;" class="numeric col-filtered">Filtered</th>
          <th style="width: 7em;" class="numeric col-rate-limited">Rate Limited</th>
        </tr>
      </thead>
      <tbody>
      {% for key in series.legend.rows %}
        <tr>
          <td>
              {% if key.color %}<span style="background-color: {{ key.color }}; display: inline-block; height: 1em; width: 1em;">&nbsp;</span>{% endif %}
          </td>
          <td class="numeric">{{ key.data.events|small_count:1 }}</td>
          <td>
              {% if key.url %}<a href="{{ key.url }}">{% endif %}{{ key.label }}{% if key.url %}</a>{% endif %}
          </td>
          <td class="numeric col-filtered">{{ key.data.filtered|small_count:1 }}</td>
          <td class="numeric col-rate-limited">{{ key.data.rate_limited|small_count:1 }}</td>
        </tr>
      {% endfor %}
      </tbody>
      {% if series.legend.rows|length > 1 %}
        <tfoot>
          {% with key=series.legend.total %}
            <tr>
              <td>
                  {% if key.color %}<span style="background-color: {{ key.color }}; display: inline-block; height: 1em; width: 1em;">&nbsp;</span>{% endif %}
              </td>
              <td class="numeric">{{ key.data.events|small_count:1 }}</td>
              <td>
                  {% if key.url %}<a href="{{ key.url }}">{% endif %}{{ key.label }}{% if key.url %}</a>{% endif %}
              </td>
              <td class="numeric col-filtered">{{ key.data.filtered|small_count:1 }}</td>
              <td class="numeric col-rate-limited">{{ key.data.rate_limited|small_count:1 }}</td>
            </tr>
          {% endwith %}
        </tfoot>
      {% endif %}
    </table>
    {% endwith %}

  </div>

  {% if report.calendar %}

  <div id="history-calendars">

    <table style="margin-bottom: 25px;">
      <tr class="mobile-full-width">
        <th style="width: 300px;">
          <h4>3 Month History</h4>
        </th>
        <td class="spectrum" style="vertical-align: bottom;">
          Fewer Events
          <div class="range">{% for color in report.calendar.legend %}<span style="background-color: {{ color }}">&nbsp;</span>{% endfor %}</div>
          More Events
        </td>
      </tr>
    </table>

    <div>
      <table>
        <tr class="mobile-full-width">
          {% for first_date, weeks in report.calendar.sheets %}
            <td class="calendar">
              <h5>{{ first_date|date:"F Y" }}</h5>
              <table>
                <tr>
                  <th>S</th>
                  <th>M</th>
                  <th>T</th>
                  <th>W</th>
                  <th>T</th>
                  <th>F</th>
                  <th>S</th>
                </tr>
                {% for week in weeks %}
                  <tr>
                    {% for day, data in week %}
                    {% if day.month == first_date.month %}
                      <td class="day" title="{{ day|date:"F jS, Y" }}: {{ data.value }}">
                        <span style="background-color: {{ data.color }}">&nbsp;</span>
                      </td>
                    {% else %}
                      <td class="day">&nbsp;</td>
                    {% endif %}
                    {% endfor %}
                  </tr>
                {% endfor %}
              </table>
            </td>
          {% endfor %}
        </tr>
      </table>
    </div>

  </div>

  {% endif %}

  {% if personal.resolved and personal.users %}
    <h4>Your impact</h4>
    <table class="user-impact">
      <tr class="mobile-full-width">
        <td width="50%">
          <table>
            <tr>
              <td class="user-impact-stat">
                <table>
                  <tr>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-top-left.png' %}" width="11px" height="28px">
                    </td>
                    <td width="64px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-top-center.png' %}" width="68px" height="28px">
                    </td>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-top-right.png' %}" width="11px" height="28px">
                    </td>
                  </tr>
                  <tr>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-middle-left.png' %}" width="11px" height="34px">
                    </td>
                    <td class="count">
                      {{ personal.resolved|small_count:0 }}
                    </td>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-middle-right.png' %}" width="11px" height="34px">
                    </td>
                  </tr>
                  <tr>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-bottom-left.png' %}" width="11px" height="28px">
                    </td>
                    <td width="64px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-bottom-center.png' %}" width="68px" height="28px">
                    </td>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-bottom-right.png' %}" width="11px" height="28px">
                    </td>
                  </tr>
                </table>
              </td>
              <td class="user-impact-text">Issue{{ personal.resolved|pluralize }} resolved this week by you.</td>
            </tr>
          </table>
        </td>
        <td width="50%">
          <table>
            <tr>
              <td class="user-impact-stat">
                <table>
                  <tr>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-top-left.png' %}" width="11px" height="28px">
                    </td>
                    <td>
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-top-center.png' %}" width="68px" height="28px">
                    </td>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-top-right.png' %}" width="11px" height="28px">
                    </td>
                  </tr>
                  <tr>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-middle-left.png' %}" width="11px" height="34px">
                    </td>
                    <td class="count">
                      {{ personal.users|small_count:0 }}
                    </td>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-middle-right.png' %}" width="11px" height="34px">
                    </td>
                  </tr>
                  <tr>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-bottom-left.png' %}" width="11px" height="28px">
                    </td>
                    <td>
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-bottom-center.png' %}" width="68px" height="28px">
                    </td>
                    <td width="11px">
                      <img src="{% absolute_asset_url 'sentry' 'images/email/circle-bottom-right.png' %}" width="11px" height="28px">
                    </td>
                  </tr>
                </table>
              </td>
              <td class="user-impact-text">User{{ personal.users|pluralize }} rejoicing because of it.</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  {% endif %}
</div>
{% endblock %}
